<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="js/vendor/d3.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
	(function () {
		var dataArray = getRandomData();
		var canvasHeight = 600;
		var canvasWidth = 600;

		var svg = d3
			.select("body")
			.append("svg")
			.attr("height", canvasHeight)
			.attr("width", canvasWidth);

		svg.append("rect").attr("fill", "#cccccc").attr("width", canvasWidth).attr("height", canvasHeight);

		var canvas = svg.append("g").attr("transform", "translate(20,20)");

		var tree = d3.layout.tree().size([400, 400]);
		var nodes = tree.nodes(dataArray)
		var links = tree.links(nodes);

		var diagonal = d3.svg.diagonal().projection(function(d) {
			return [d.y, d.x];
		});

		var node = canvas.selectAll(".node")
			.data(nodes)
			.enter()
			.append("g")
			.attr("class", "node")
			.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

		node.append("circle")
			.attr("fill", "steelblue")
			.attr("r", 5);

		node.append("text")
			.text(function(d) { return d.name })
//			.attr("transform", "rotate(90), translate(7,0)")
			.attr("transform", "translate(7,0)")
			.attr("font-size", 9);

		canvas.selectAll(".links")
			.data(links)
			.enter()
			.append("path")
			.attr("class", "links")
			.attr("stroke", "#aaa")
			.attr("fill", "none")
			.attr("d", diagonal);

		function getRandomData() {
			var d = [];
			for (var n = 0; n < 20; n++) {
				d[d.length] = {
					name: "pName" + n,
					value: Math.floor(Math.random() * n) + 5,
					children: (function () {
						var d1 = [];
						for (var n1 = 0; n1 < Math.round(Math.random() * 15); n1++) {
							d1[d1.length] = {
								name: "name" + n + n1,
								value: Math.floor(Math.random() * n) + 5,
								children: (function () {
									var d2 = [];
									for (var n1 = 0; n1 < Math.round(Math.random() * 15); n1++) {
										d2[d2.length] = {
											name: "name" + n + n1,
											value: Math.floor(Math.random() * n) + 5
										}
									}
									return d2;
								}())

							}
						}
						return d1;
					}())
				};
			}
			return d[0];
		}
	}());
</script>
</body>
</html>